<!-- 单个评论项 -->
<div class="comment-item border-b border-gray-200 pb-4 mb-4" data-comment-id="{$comment.id}">
    <div class="group py-4">
        <div class="flex gap-3">
            <div class="flex-shrink-0">
                <img src="{$comment.user.avatar}" alt="{$comment.user.nickname}"
                    class="w-10 h-10 rounded-full object-cover">
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2 mb-2">
                    <span class="font-medium text-gray-800 text-md">{$comment.user.nickname}</span>
                    {if $comment.is_admin}
                    <span class="px-2 py-0.5 text-xs bg-orange-100 text-orange-600 rounded-full">管理员</span>
                    {/if}
                    <div class="ml-auto text-xs text-gray-500">
                        {if $index == 0}沙发{elseif $index == 1}板凳{else}{$index + 1}#{/if}
                    </div>
                </div>
                <div class="text-gray-800 leading-relaxed mb-3">{$comment.content|raw}</div>

                <!-- 评论中的图片展示 -->
                {if isset($comment.images) && $comment.images}
                <div class="mb-3">
                    <div class="flex flex-wrap gap-3 items-center">
                        {volist name="comment.images" id="image" key="img_index"}
                        <div class="relative group cursor-pointer comment-image-item"
                            onclick="openImageGallery({$comment.images|json_encode}, {$img_index - 1})">
                            <img src="{$image}" alt="图片{$img_index}"
                                class="w-32 h-32 object-cover rounded-sm hover:opacity-90 transition-all duration-300 ">
                            <!-- 悬停遮罩 -->
                            <div
                                class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300 rounded-sm flex items-center justify-center">
                                <i
                                    class="fas fa-search-plus text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-lg"></i>
                            </div>
                            <!-- 图片序号 -->
                            {if count($comment.images) > 1}
                            <div
                                class="absolute top-1 right-1 bg-black bg-opacity-60 text-white text-xs px-2 py-1 rounded">
                                {$img_index}/{count($comment.images)}
                            </div>
                            {/if}
                        </div>
                        {/volist}
                    </div>
                </div>
                {/if}

                <!-- 评论中的文件展示 -->
                {if isset($comment.attachments) && $comment.attachments}
                <div class="mb-3">
                    <div class="space-y-2">
                        {volist name="comment.attachments" id="file"}
                        <div class="flex items-center gap-3 p-2 bg-gray-50 rounded cursor-pointer hover:bg-gray-100 transition-colors duration-200 text-sm"
                            onclick="downloadFile('{$file.url}', '{$file.name}')">
                            <i class="fas fa-file w-5 h-5 text-gray-500"></i>
                            <span class="flex-1 truncate text-blue-600">{$file.name}</span>
                            <i class="fas fa-download w-4 h-4 text-gray-400"></i>
                        </div>
                        {/volist}
                    </div>
                </div>
                {/if}

                <div class="flex items-center justify-between mt-2">
                    <span class="text-gray-500 text-sm">{$comment.create_time}</span>
                    <div class="flex items-center gap-3">
                        <button class="flex items-center gap-1 text-gray-500 hover:text-blue-500 transition-colors"
                            onclick="handleCommentLike({$comment.id})">
                            <i class="fas fa-thumbs-up w-4 h-4 {if $comment.is_liked}text-blue-500{/if}"></i>
                            <span class="text-xs {if $comment.is_liked}text-blue-500{/if}">{if $comment.likes >
                                0}{$comment.likes}{else}赞{/if}</span>
                        </button>
                        <button class="flex items-center gap-1 text-gray-500 hover:text-blue-500 transition-colors"
                            onclick="handleCommentReply({$comment.id})">
                            <i class="fas fa-reply w-4 h-4"></i>
                            <span class="text-xs">回复</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 回复列表 -->
    {if isset($comment.replies) && $comment.replies && count($comment.replies) > 0}
    <div class="py-4 pl-10 border-gray-200  ">
        <div class="text-sm text-gray-500 mb-3">全部回复</div>
        {volist name="comment.replies" id="reply" key="reply_index"}
        <div class="group py-4" data-reply-id="{$reply.id}">
            <div class="flex gap-3">
                <div class="flex-shrink-0">
                    <img src="{$reply.user.avatar}" alt="{$reply.user.nickname}"
                        class="w-8 h-8 rounded-full object-cover">
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="font-medium text-gray-800 text-sm">{$reply.user.nickname}</span>
                        {if $reply.is_admin}
                        <span class="px-2 py-0.5 text-xs bg-orange-100 text-orange-600 rounded-full">管理员</span>
                        {/if}
                    </div>
                    <div class="text-gray-800 leading-relaxed mb-3 text-sm">{$reply.content|raw}</div>

                    <!-- 回复中的图片展示 -->
                    {if isset($reply.images) && $reply.images}
                    <div class="mb-3">
                        <div class="flex flex-wrap gap-2 items-center">
                            {volist name="reply.images" id="reply_image" key="reply_img_index"}
                            <div class="relative group cursor-pointer reply-image-item"
                                onclick="openImageGallery({$reply.images|json_encode}, {$reply_img_index - 1})">
                                <img src="{$reply_image}" alt="图片{$reply_img_index}"
                                    class="w-24 h-24 object-cover rounded-sm hover:opacity-90 transition-all duration-300 ">
                                <!-- 悬停遮罩 -->
                                <div
                                    class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300 rounded-sm flex items-center justify-center">
                                    <i
                                        class="fas fa-search-plus text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-sm"></i>
                                </div>
                                <!-- 图片序号 -->
                                {if count($reply.images) > 1}
                                <div
                                    class="absolute top-1 right-1 bg-black bg-opacity-60 text-white text-xs px-1.5 py-0.5 rounded text-xs">
                                    {$reply_img_index}/{count($reply.images)}
                                </div>
                                {/if}
                            </div>
                            {/volist}
                        </div>
                    </div>
                    {/if}

                    <!-- 回复中的文件展示 -->
                    {if isset($reply.attachments) && $reply.attachments}
                    <div class="mb-3">
                        <div class="space-y-2">
                            {volist name="reply.attachments" id="reply_file"}
                            <div class="flex items-center gap-3 p-2 bg-gray-50 rounded cursor-pointer hover:bg-gray-100 transition-colors duration-200 text-sm"
                                onclick="downloadFile('{$reply_file.url}', '{$reply_file.name}')">
                                <i class="fas fa-file w-4 h-4 text-gray-500"></i>
                                <span class="flex-1 truncate text-gray-800">{$reply_file.name}</span>
                                <i class="fas fa-download w-3 h-3 text-gray-400"></i>
                            </div>
                            {/volist}
                        </div>
                    </div>
                    {/if}

                    <div class="flex items-center justify-between mt-2">
                        <span class="text-gray-500 text-xs">{$reply.create_time}</span>
                        <div class="flex items-center gap-3">
                            <button class="flex items-center gap-1 text-gray-500 hover:text-blue-500 transition-colors"
                                onclick="handleCommentLike({$reply.id})">
                                <i class="fas fa-thumbs-up w-3 h-3 {if $reply.is_liked}text-blue-500{/if}"></i>
                                <span class="text-xs {if $reply.is_liked}text-blue-500{/if}">{if $reply.likes >
                                    0}{$reply.likes}{else}赞{/if}</span>
                            </button>
                            <button class="flex items-center gap-1 text-gray-500 hover:text-blue-500 transition-colors"
                                onclick="handleCommentReply({$reply.id}, {$comment.id})">
                                <i class="fas fa-reply w-3 h-3"></i>
                                <span class="text-xs">回复</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {/volist}

        <!-- 如果回复数量超过3条，显示展开按钮 -->
        {if count($comment.replies) >= 3}
        <div class="mt-3">
            <button
                class="px-3 py-1.5 text-xs rounded-md text-gray-500 hover:text-blue-500 hover:bg-blue-50 transition-colors duration-200"
                onclick="loadMoreReplies({$comment.id})">
                查看更多回复
            </button>
        </div>
        {/if}
    </div>
    {/if}

    <!-- 回复表单（动态插入） -->
    <div id="reply-form-{$comment.id}" class="hidden mt-4 p-4  rounded">
        <!-- 回复表单将通过JavaScript动态生成 -->
    </div>
</div>